<template>
  <div class="container">
    <div class="box">
      <img class="headerPng" src="@/assets/msgTitle1.png" alt="" />
      <div class="content">
        <div class="tip">联系电话作为您中奖或其他活动信息通知使用</div>
        <el-form
          ref="form"
          :rules="rules"
          size="mini"
          label-width="100px"
          :model="form"
        >
          <el-form-item label="联系电话" prop="tel">
            <el-input
              maxlength="11"
              v-model="form.tel"
            ></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="选择分类" prop="type">
            <el-select v-model="form.type">
              <el-option
                v-for="(v, k) in list"
                :key="v.ID"
                :value="v.ID"
                :label="v.Name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="您的意见或建议" prop="note">
            <el-input type="textarea" v-model="form.note" rows="10"></el-input>
          </el-form-item>
        </el-form>
        <img
          class="submitBtn"
          @click="submit"
          src="@/assets/submit.png"
          alt=""
        />
      </div>
      <New ref="newRoate" />
    </div>
  </div>
</template>

<script>
export default {
  components: {
    New: () => import("@/components/new.vue"),
  },
  data() {
    return {
      list: [],
      form: {
        name: "",
        tel: "",
        type: 1,
        note: "",
        mainType: 1,
      },
      rules: {
        name: [{ required: true,message:"请输入正确中文姓名",  trigger: "blur" },{message:"请输入正确中文姓名",pattern:/^[\u4e00-\u9fa5]{2,}$/,trigger:'blur'}],
        tel: [
          { required: true,  trigger: "blur" },
          {
            message: "请输入正确手机号",
            trigger: "blur",
            pattern: /^1[3456789]\d{9}$/,
          },
        ],
        type: [{ required: true, message: "请选择", trigger: "blur" }],
        note: [
          { required: true, message: "请输入意见或建议", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let { data } = await this.axios.get("/api/main/GetList?maintype=1");
      this.list = data.UserData;
    },
    submit() {
      this.$refs.form.validate(async (v) => {
        if (v) {
          let { data } = await this.axios({
            url: "/api/main/SaveUserContent",
            method: "post",
            data: this.form,
          });
          if (data.Status == 0) {
             let { data: res } = await this.axios({
              url: "/api/main/GetStartPrize",
              method: "post",
              data: {
                tel: this.form.tel,
                mainType: this.form.mainType,
                type:this.form.type
              },
            });
            if (!res.UserData) {
              this.$message.error("用户已参加过抽奖！");
              setTimeout(() => {
                this.visible = false;
                this.$router.replace("/");
              }, 1000);
              return
            }
            this.$refs.newRoate.init(
              this.form.tel,
              this.form.mainType,
              res.UserData
            );
          } else {
            this.$message.error(data.Message);
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss">
.el-form {
  .el-form-item__label {
    color: #231714;
    font-size: 78px;
    font-weight: 600;
  }
}
.el-input {
  width: 100%;
  > div {
    width: 100% !important;
  }
  .el-input__inner {
    border-radius: 150px;
    border: 16px solid #231714;
  }
  
}
.el-textarea {
  .el-textarea__inner {
    border-radius: 50px;
    border: 16px solid #231714;
  }
}
</style>
<style lang="scss" scoped>
.container {
  margin: 5vh 0;
  .box {
    width: 90%;
    margin: 0 auto;
    background: #fff;
    border: 16px solid #231714;
    border-radius: 36px;
    position: relative;
    .headerPng {
      position: absolute;
      width: 50%;
      object-fit: cover;
      left: 25%;
      top: -5%;
      z-index: 99;
    }
    .content {
      padding: 10vh 4vh 10vh;
    }
    .submitBtn {
      position: absolute;
      width: 110%;
      left: -5%;
      bottom: -5%;
      object-fit: cover;
    }
  }
}
.tip {
  text-align: center;
  font-size: 66px;
  color: #666666;
  margin-bottom: 130px;
}
</style>
